<template>
  <div>
    <ul>
      <li v-for="m in messageList" :key="m.id">
        <!-- 使用to的字符串写法，完成query参数的传递 -->
        <!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}&content=${m.content}`">{{m.title}}</router-link> -->

        <!-- 使用to的对象写法，完成query参数的传递 -->
        <router-link 
          :to="{
            path:'/home/message/detail',
            query:{
              id:m.id,
              title:m.title,
              content:{x:100}
            }
          }" 
        >
          {{m.title}}（观察代码，会发现传递的content废了，因为写成了对象）
        </router-link>
      </li>
    </ul>
    <hr>
    <div class="panel panel-body panel-primary">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Message",
    data() {
      return {
        messageList:[
          {id:'asfdtrfsa01',title:'消息001',content:'支付宝到账1000W元'},
          {id:'asfdtrfsa02',title:'消息002',content:'您的电话已欠费，请及时缴费'},
          {id:'asfdtrfsa03',title:'消息003',content:'缅甸北部欢迎你，一夜暴富不是梦！'},
        ]
      }
    },
  };
</script>